<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type='text/css' rel='stylesheet' href="../css/bootstrap.min.css" />
<link type='text/css' rel='stylesheet' href="../css/style.css" />

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/object/ChatUser.js"></script>
<script type="text/javascript" src="../js/object/Message.js"></script>
<script type="text/javascript" src="../js/object/AjaxObj.js"></script>
<script type="text/javascript" src="../js/util/Define.js"></script>
<script type="text/javascript" src="../js/object/ChatController.js"></script>
<script type="text/javascript" src="../js/comunication.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<title>course Lesson</title>
</head>
<body>

	<div id="wrapper">
		<div class="board-content container">
			<div class="row">
				<div class="toolbar col-md-1">
					<h1>Tools</h1>
					<div class="toolbox">
						<div class="tool move" id="tool_move" data-tool="4">
							<div class="toolBg"></div>
							<span>Move</span>
						</div>
						<div class="tool sticky" id="tool_sticky" data-tool="c">
							<div class="toolBg"></div>
							<span>Sticky</span>
						</div>
						<div class="tool pencel" id="tool_pencil" data-tool="1">
							<div class="toolBg"></div>
							<span>Pencil</span>
						</div>
						<div class="tool shape" id="tool_shape" data-tool="3">
							<div class="toolBg"></div>
							<span>Shape</span>
						</div>
						<div class="tool text" id="tool_text" data-tool="5">
							<div class="toolBg"></div>
							<span>Text</span>
						</div>
						<div class="tool erase" id="tool_eraser" data-tool="5">
							<div class="toolBg"></div>
							<span>Erase</span>
						</div>

					</div>
					<h1>Colors</h1>
					<div class="colorbox">
						<div class="toolkit">
							<div data-tool="240,240,240" class="color active"
								style="left: 0px; background: rgb(255, 255, 255);"></div>
							<div data-tool="250,50,10" class="color"
								style="left: 0px; display: block; background: rgb(250, 62, 7);"></div>
							<div data-tool="120,215,100" class="color"
								style="left: 0px; background: rgb(119, 215, 100);"></div>
							<div data-tool="225,170,30" class="color"
								style="left: 0px; background: rgb(224, 170, 31);"></div>
							<div data-tool="35,120,220" class="color"
								style="left: 0px; background: rgb(57, 120, 220);"></div>
							<div data-tool="40,40,40" class="color"
								style="left: 0px; background: rgb(50, 50, 50);"></div>
							<div data-tool="40,40,40">
								All Color<input type="color" name="choise-color"
									class="choise-color">
							</div>
						</div>
					</div>
				</div>
				<div class="whiteboardbox col-md-8">
					<canvas id="whiteboard" tabindex="0" width="770px" height="550px"></canvas>
					<div class="user-form"></div>
				</div>
				<div class="chatbox col-md-3">
					<div class="chat-title"></div>
					<div class="chat-output"></div>
					<div class="chatform">
						<div class="chat-text-box">
							<input type="text" class="chatbox-txt form-control"
								name="chatbox-txt" placeholder="Chat at here..."
								autofocus="autofocus">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="other-content container"></div>
	</div>
	<div class="sticky-form">
		<div class="sticky-title">
			<img alt="" src="">
		</div>
		<div class="sticky-text">
			<!-- 	<textarea class="gwt-TextArea note draggableWidget-noDragBorders"
				style="width: 218px; height: 130px;"></textarea>
				 -->
		</div>
	</div>
</body>
</html>
